<template>
    <block title="实验大棚土壤参数">
        <div class="list">
            <div class="item">
                <div class="label">温度</div>
                <div class="val">16.8℃</div>
            </div>
            <div class="item">
                <div class="label">水分</div>
                <div class="val">23%</div>
            </div>
            <div class="item">
                <div class="label">pH</div>
                <div class="val">6.5</div>
            </div>
            <div class="item">
                <div class="label">盐分</div>
                <div class="val">3.5dS/m</div>
            </div>
            <div class="item">
                <div class="label">紧实度</div>
                <div class="val">1024 pa</div>
            </div>
           

        </div>
    </block>
</template>
<script setup lang="ts">
import block from '@/components/block.vue';
import { onMounted, ref } from 'vue';
import echarts from '@/components/echarts';
</script>
<style scoped>
.list {
   
}

.item {
    border-top: 1px solid #c9ea5b66;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 4vh;
}


.label {
    text-align: center;
    color: #36c7dd;
    font-size: 1.5vh;
   
    width: 20%;
}

.val {
    text-align: center;
    color: #fff;
    font-size: 1.5vh;
    width: 70%;
   
}
</style>